<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no viewport-fit=cover" />
		<link rel="stylesheet" href="../../Common/css/ufun.css">
		<link rel="stylesheet" href="../../Common/css/lib/materialize.min.css">
		<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
		<script src="../../Common/js/tools.js"></script>
		<script src="../../Common/js/jump.js"></script>
		<script src="../../Common/js/lib/jquery-3.4.1.min.js"></script>
		<script src="../../Common/js/lib/materialize.min.js"></script>
		<style>
			body {
				min-height: 100vh;
				background: linear-gradient(var(--color-yellow), 40vw, var(--color-gray-white));
			}

			.content {
				overflow: scroll;
			}

			#Upper {
				flex: none;
			}

			#UpperFooter,
			#Content {
				box-shadow: 0 0 5px 0px var(--color-gray-light);
			}

			#UpperContent {
				position: relative;
				display: block;
				height: 25vw;
				width: 100vw;
			}

			#UpperContent>* {
				position: absolute;
			}

			#HeadImg {
				top: 0vw;
				left: 8vw;
				width: 20vw;
				height: 20vw;
				border-radius: 100%;
				border: 2px solid var(--color-white);
			}

			#UserNick {
				top: 2vw;
				left: 35vw;
				font-size: 5.5vw;
			}

			#UserNick #Identify {
				display: none;
				color: var(--color-yellow);
			}

			#TopInfo {
				top: 12vw;
				left: 35vw;
				width: 60vw;
				font-size: 4.5vw;
			}

			.number {
				color: var(--color-yellow);
				margin: 0 1.5vw;
			}
			

			.float-tag {
				display: inline-block;
				flex: auto;
				text-align: right;
			}

			#threeHolder {
				margin-top: 3vw;
				margin-bottom: 3vw;
			}
			
			#Follow {
				display: inline-block;
				top: 3vw;
				right: 10vw;
				padding: 1vw 3vw;
				border-radius: 2vw;
				font-size: 3vw;
				text-align: center;
				background-color: var(--color-gray-dark);
				color: var(--color-yellow);
				transition: background-color 0s;
			}

			#Follow.followed {
				color: var(--color-white);
				background-color: var(--color-gray-light);
			}

			#UpperFooter {
				position: relative;
				width: 90vw;
				margin: 0 5vw;
				padding: 5vw;
				border-radius: 5vw;
				background-color: var(--color-white);
			}

			#UpperFooter>div {
				display: flex;
				width: 100%;
			}

			hr {
				border: 0;
				border-top: 1px solid var(--color-gray-light);		
				display: block;
				height: 0;
				margin: 2.5vw 0 3vw;
			}

			#Content {
				flex: none;
				width: 100%;
				padding: 2vw 5vw;
				margin-top: 5vw;
				border-top-left-radius: 5vw;
				border-top-right-radius: 5vw;
				background-color: var(--color-white);
			}

			#Edit {
				float: right;
				display: none;
			}

			#Edit i {
				padding-top: 1vw;
				font-size: 4.5vw;
			}

			#IntroText {
				padding: 0;
				font-size: 4vw;
				white-space: pre-wrap;
			}

			#Blank {
				flex: auto;
				background-color: var(--color-white);
			}
			
			.bgc-transparent {
				border-bottom: none !important;
			}
		</style>
	</head>
	<body>
		<header class="bgc-transparent">
			<div id="Left" class="com-btn" onclick="ThisBack()">
				<i class="material-icons">keyboard_arrow_left</i>
			</div>
			<div id="Right" class="com-btn">
				<i class="material-icons">more_horiz</i>
			</div>
		</header>
		<div class="content fixed">
			<div id="Upper">
				<div id="UpperContent">
					<img id="HeadImg" onclick="JumpToImgView(_ServerLoc + UserInfo['uHeadImgLoc']);" />
					<div id="UserNick">
						<span id="">用户名</span>
						<span id="Identify">Funner</span>
					</div>
					<div id="TopInfo">
						<div class="float-tag">粉丝<span id="FansCnt" class="number black-text">1.2K&nbsp;</span></div>
						<div class="float-tag">关注<span id="FollowCnt" class="number black-text">1.2K&nbsp;</span></div>
					</div>
					<div id="Follow" class="button waves-effect" onclick="clickFollow()">
						+ 关注
					</div>
				</div>
				<div id="UpperFooter">
					<div class="float-tag">综合评分<span id="Star" class="number">4.7</span></div>
					<div id="threeHolder">
						<div class="float-tag">正确度<span id="StarCrt" class="number">4.7</span></div>
						<div class="float-tag">流畅度<span id="StarFln" class="number">4.7</span></div>
						<div class="float-tag">易懂度<span id="StarClr" class="number">4.7</span></div>
					</div>
					<hr>
					<div class="float-tag">解决问题<span id="AnsCnt" class="number">2K</span></div>
					<hr>
					<div class="float-tag">开办讲座<span id="SetLec" class="number">0</span></div>
				</div>
			</div>
			<div id="Content" class="container">
				<div>
					<span>个人简介</span>
					<span id="Edit" onclick="JumpToSetCV(userInfo['uCV']);">
						<i class="material-icons">mode_edit</i>
					</span>
				</div>
				<hr>
				<pre id="IntroText">
				</pre>
			</div>
			<!-- 白色补位 -->
			<div id="Blank">

			</div>
		</div>
	</body>

	<script>
		var phoneNo; //手机号, 当前浏览的这个页面的主人的id
		var userHash; //cookie值
		var userInfo; //当前所查看用户的UserInfo
		var activePhoneNo; //当前你正在使用的这个账号的id

		document.addEventListener('plusready', function() {
			DoWait();
			GetStatusTop();
			//获取全局存储"userHash"和页面存储"phoneNo"
			phoneNo = plus.webview.currentWebview().phoneNo;
			userHash = plus.storage.getItem("userHash");
			refreshPage();
		});
		
		
		
		function refreshPage() {
			function badPage() {
				plus.nativeUI.alert("请稍后重试", "网络错误", function(e) {
					DontWait();
					plus.webview.currentWebview().close();
				});
			}
			//AJAX: 通过phoneNo获取当前用户的所有信息
			CallAJAX("getUserInfo",  JSON.stringify({
				"phoneNo": phoneNo,
				"infoReqs": "all"
			}), function(data) { // success函数
				if (data["res"] != "ok") {
					badPage();
					return;
				}
				userInfo = data['userInfo'];
				RefreshUserInfo();
				drawPage();
			}, function() {
				badPage();
			});
		}


		function RefreshUserInfo(callback) {
			var userHash = plus.storage.getItem("userHash");
			DoWait();
			CallAJAX("getPhoneNoByUserHash", userHash, function(data) { // success函数
				if (data["res"] == "ok") {
					activePhoneNo = data["phoneNo"];
					//AJAX: 通过phoneNo获取当前用户的所有信息
					if(activePhoneNo == phoneNo) {
							$("#Edit").css("display", "inline");
						}
					}
			}, function() {
				DontWait();
			});
		}



		function drawPage() {
			checkFollowed();
			ID("UserNick").innerHTML = userInfo["uNick"]; //用户名
			ID("HeadImg").src = SERVER_LOC + userInfo["uHeadImgLoc"]; //头像

			ID("Star").innerHTML = ((
				userInfo["uStarCrt"] +
				userInfo["uStarFln"] +
				userInfo["uStarClr"]) / 3).toFixed(1); //星级
			ID("StarCrt").innerHTML = userInfo["uStarCrt"].toFixed(1);
			ID("StarFln").innerHTML = userInfo["uStarFln"].toFixed(1);
			ID("StarClr").innerHTML = userInfo["uStarClr"].toFixed(1);

			ID("FollowCnt").innerHTML = userInfo["uFollowCnt"];
			ID("FansCnt").innerHTML = userInfo["uFansCnt"];
			ID("AnsCnt").innerHTML = userInfo["uAnsCnt"];

			var text = ID("IntroText");
			text.innerHTML = userInfo["uCV"];
			if (text.innerHTML.trim() == '')
				text.innerHTML += "<font color=gray>这位用户暂时还没有填写个人简介哦~<\/font>";
			// if (userInfo['uNick'] === JSON.parse(plus.storage.getItem("userInfo"))['uNick'])
				// ID('Edit').style.display = "inline";
		}

		function checkFollowed() {
			CallAJAX('checkFollowed', {
				'userHash': userHash,
				'followeeId': phoneNo,
			}, function(data) {
				if (data["res"] == "yes") {
					ID("Follow").classList.add('followed');
					ID("Follow").innerText = "已关注";
				} else if (data["res"] == "2") {
					ID("Follow").style.display = 'none';
				} else {
					ID("Follow").classList.remove('followed');
					ID("Follow").innerText = "+ 关注";
				}
				// 显示页面
				DoShow(plus.webview.currentWebview(), "slide-in-right", 250);
			});
		}

		function clickFollow() {
			DoFollow(phoneNo, refreshPage);
		}
	</script>
</html>
